@mixin f-input-gray-or-default($f-type: '') {
  $f-text: $f-input-gray-text;
  $f-background: $f-input-gray-bg;
  $f-border-color: $f-border-color;

  @if $f-type=='default' {
    $f-text: $farris-input-readonly-color;
    $f-background: $farris-input-readonly-bg;
    $f-border-color: $farris-input-readonly-border-color;
  }

  .farris-input-wrap {

    .form-control {

      &[readonly],
      &:disabled {
        color: $f-text;
        background: $f-background;
        border-color: $f-border-color;

        &+.input-append-wrapper {
          background: $f-background;
        }
      }
    }
  }

  //输入控件组件
  .f-cmp-inputgroup,
  .f-component-timepicker {
    .input-group {
      .form-control {

        &[readonly],
        &:disabled {
          color: $farris-input-color;
          background: $farris-input-bg;
        }
      }

      &.f-state-disabled,
      &.f-state-readonly {
        background: $f-background;
        border-color: $f-border-color;

        .form-control {
          color: $f-text;
          background: $f-background !important;
        }

        .input-group-append {
          background: $f-background;
        }
      }

      &.f-state-editable {
        .form-control {
          color: $farris-input-color;
          border-color: $farris-input-border-color;
          background: $farris-input-bg;
        }
      }
    }
  }

  .f-state-readonly.k-datepicker .k-picker-wrap {
    color: $f-text;
    background: $f-background;
    border-color: $f-border-color;
  }

  .farris-input-wrap {

    .k-autocomplete,
    .k-multiselect-wrap,
    .k-dropdown .k-dropdown-wrap,
    .k-combobox .k-dropdown-wrap,
    .k-datepicker .k-picker-wrap,
    .k-timepicker .k-picker-wrap,
    .k-datetimepicker .k-picker-wrap,
    .k-dateinput .k-dateinput-wrap,
    .k-numerictextbox .k-numeric-wrap {
      &.k-state-disabled {
        color: $f-text;
        background: $f-background;
        border-color: $f-border-color;
      }
    }

    .k-state-disabled {
      &.k-dateinput .k-dateinput-wrap {
        color: $f-text;
        background: $f-background;
        border-color: $f-border-color;
      }
    }

    .f-state-readonly,
    [ng-reflect-readonly='true'] {

      &.k-autocomplete,
      &.k-multiselect-wrap,
      &.k-dropdown .k-dropdown-wrap,
      &.k-combobox .k-dropdown-wrap,
      &.k-datepicker .k-picker-wrap,
      &.k-timepicker .k-picker-wrap,
      &.k-datetimepicker .k-picker-wrap,
      &.k-dateinput .k-dateinput-wrap,
      &.k-numerictextbox .k-numeric-wrap {
        color: $f-text;
        background: $f-background;
        border-color: $f-border-color;
      }
    }

    .k-state-disabled {
      &.k-dateinput .k-dateinput-wrap {
        color: $f-text;
        background: $f-background;
        border-color: $f-border-color;
      }
    }
  }

  .farris-editor.farris-editor-readonly {

    // 置灰
    .mce-container {
      color: $f-text;
      background: $f-background;
    }
  }

  // HTML控件
  .farris-html-editor {
    .ql-container.ql-disabled {
      color: $f-text;
      background: $f-background;
      border-color: $f-border-color !important;
    }
  }
}

@mixin f-style-singleline-or-default($f-type: '') {
  @if $f-type=='default' {
    border-width: 1px;
    border-color: $f-border-color;
  }

  @else {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: $farris-input-viewstatestate-border-color;
  }
}

@mixin f-style-singleline-or-default-editor($f-type: '') {
  @if $f-type=='default' {
    border-width: 1px !important;
    border-color: $f-border-color;
  }

  @else {
    border-width: 0 0 1px 0 !important;
    border-style: solid;
    border-color: $farris-input-viewstatestate-border-color;
  }
}

@mixin f-input-singleline-or-default($f-type: '') {

  // 不可编辑状态下一根线
  // 普通输入控件状态,排除表格问题
  .farris-input-wrap {
    .form-control {

      &[readonly],
      &:disabled {
        @include f-style-singleline-or-default($f-type);
      }
    }

    .farris-html-editor .ql-container.ql-disabled {
      @include f-style-singleline-or-default-editor($f-type);
    }

    .farris-editor {

      &.farris-editor-readonly,
      &.farris-editor-disabled {
        .mce-tinymce {
          @include f-style-singleline-or-default-editor($f-type);

        }
      }
    }

    //输入控件组件
    .f-cmp-inputgroup,
    .f-cmp-number-spinner,
    .f-component-timepicker {
      .input-group {
        .form-control {

          &[readonly],
          &:disabled {
            border: 0;
          }
        }

        &.f-state-disabled,
        &.f-state-readonly {
          @include f-style-singleline-or-default($f-type);
        }

        &.f-state-editable {
          border-width: 1px;
          border-color: $farris-input-border-color;
        }

        &.f-state-focus {
          border-color: $farris-input-focus-border-color;
          color: $farris-input-focused-color;
        }
      }
    }

    .k-autocomplete,
    .k-multiselect-wrap,
    .k-dropdown .k-dropdown-wrap,
    .k-combobox .k-dropdown-wrap,
    .k-datepicker .k-picker-wrap,
    .k-timepicker .k-picker-wrap,
    .k-datetimepicker .k-picker-wrap,
    .k-dateinput .k-dateinput-wrap,
    .k-numerictextbox .k-numeric-wrap {
      &.k-state-disabled {
        @include f-style-singleline-or-default($f-type);
      }
    }

    .f-state-readonly,
    [ng-reflect-readonly='true'] {

      &.k-autocomplete,
      &.k-multiselect-wrap,
      &.k-dropdown .k-dropdown-wrap,
      &.k-combobox .k-dropdown-wrap,
      &.k-datepicker .k-picker-wrap,
      &.k-timepicker .k-picker-wrap,
      &.k-datetimepicker .k-picker-wrap,
      &.k-dateinput .k-dateinput-wrap,
      &.k-numerictextbox .k-numeric-wrap {
        @include f-style-singleline-or-default($f-type);
      }
    }

    .k-state-disabled {
      &.k-dateinput .k-dateinput-wrap {
        @include f-style-singleline-or-default($f-type);
      }
    }

    .k-state-disabled,
    .f-state-readonly {
      .k-dateinput .k-dateinput-wrap {
        border: 0 !important;
      }
    }
  }

}